<!--
 * @Author: your name
 * @Date: 2020-07-29 15:18:31
 * @LastEditTime: 2020-08-24 23:35:10
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \ryfront\src\modules\resources\Index.vue
--> 
<template>
    <div style="height:100%;">
        <el-row style="height:100%;">
            <el-col :span="6">
                <div style="width:100%;height:50px;background-color:#67C23A;color:#ffffff;">&nbsp;&nbsp; 资源列表</div>
                <el-tree :lazy=true :load="loadNode" :data="tree_data"  :props="treeProps" @node-contextmenu="rightClick" ></el-tree>


                <!-- 右键操作框 -->
                <div width="50px;" v-show="menuVisible">
                    <ul id="menu" style="cursor:pointer;" class="operate-alter">
                        <span @click="addRes">添加</span>
                         <el-divider></el-divider>
                        <span @click="updRes">修改</span>
                         <el-divider></el-divider>
                        <span @click="delRes">删除</span>
                    </ul>
                </div>
            </el-col>

            <el-col :span="18" style="border-left:solid 1px #000000;height:100%;">
                <div style="width:100%;height:50px;background-color:#409EFF;color:#ffffff;">&nbsp;&nbsp; 资源详情</div>
                <div style="width:70%;">
                    <el-form ref="resform" :model="res" label-width="80px">
                        <el-form-item label="资源名称">
                            <el-input size="small" v-model="res.resourceName"></el-input>
                        </el-form-item>
                        <el-form-item label="图标">
                            <el-input  size="small" v-model="res.resourceIcon"></el-input>
                        </el-form-item>
                        <el-form-item label="上级菜单">
                            <el-input  size="small" v-model="res.resourceParent"></el-input>
                        </el-form-item>
                        <el-form-item label="资源编码">
                            <el-input  size="small" v-model="res.resourceCode"></el-input>
                        </el-form-item>
                        <!-- <el-form-item label="创建时间">
                            <el-input  size="small" v-model="res.creteTime"></el-input>
                        </el-form-item> -->
                        <el-form-item label="状态">
                            <el-switch  v-model="res.isUse" active-color="#13ce66" inactive-color="#ff4949" ></el-switch>       
                        </el-form-item>
                        <el-form-item>
                            <el-button size="small" v-if="showTrue" type="primary" @click="saveRes"  >创建</el-button>
                            <el-button size="small" v-else type="primary" @click="updateRes"  >保存</el-button>
                            <el-button size="small" >取消</el-button>
                        </el-form-item>    
                    </el-form>
                </div>
            </el-col>
        </el-row>
    </div>
</template>


<script>
import {resRoot,resSubNode,resAdd,resById,resUpd} from '@/api/index';
export default {
    name:'resourcesList',
    data(){
        return {
            tree_data:[
                {
                    label: '一级 1',
                    children: [{
                        label: '二级 1-1',
                        children: [{
                        label: '三级 1-1-1'
                        }]
                    }]
                }
            ],
            treeProps:{
                children: 'children',
                label: 'label',
                isLeaf: 'leaf'
            },
            menuVisible:false,
            showAdd: true,
            res:{
                resourceId:'',
                resourceName:'',
                resourceIcon:'',
                resourceParent:'',
                resourceCode:'',
                createTime:'',
                status:'0',
                isUse:false,
            },
            selectNode: null,
            selectRealNode : null,
        }
    },
    methods:{
        rightClick(MouseEvent,object,Node,element){
            
            let menu = document.querySelector("#menu");
            menu.style.left = MouseEvent.clientX -220 +"px";
            document.addEventListener("click",this.foo);
            menu.style.top = MouseEvent.clientY -170 + 'px';
            console.log("evemt",MouseEvent);
            console.log("obj",object);
            console.log("value",Node);
            this.selectNode = Node.data.id;
            this.selectRealNode = Node;
            console.log(this.selectNode );
            console.log("element",element);
            this.menuVisible = true;
            
        },
        foo(){
            this.menuVisible = false;
            // this.selectNode = null;
            document.removeEventListener("click",this.foo);
        },
        addRes(){
            this.res.resourceName = "";
            this.res.resourceIcon = "";
            this.res.resourceParent = "";
            this.res.resourceCode = "";
            this.res.createTime = null;
            this.res.isUse = false;
            this.showAdd = true;
        },
        updRes(){
            let obj = this.selectRealNode;
            //去后端查询数据 根据id查询 
            resById(this.selectNode).then((result) => {
                if(result.status == 200){
                    let data = result.data.data;
                    this.res.resourceId = data.resourceId;
                    this.res.resourceName = data.resourceName;
                    this.res.resourceIcon = data.resourceIcon;
                    this.res.resourceParent = data.resourceParent;
                    this.res.resourceCode = data.resourceCode;
                    this.res.createTime = null;
                    this.res.isUse = data.status == "1"? true: false;
                    this.showAdd = false;
                }  
            })

            console.log(obj);
        },
        delRes(){

        },
        loadRoot(){
            resRoot().then((result) => {
                // console.log(result);
                if(result.status == 200){
                    let data = result.data.data;
                    this.tree_data = [
                        {label:data.resourceName,id:data.resourceId},
                    ]
                }
            });
        },
        //懒加载节点
        loadNode(node, resolve){
            // console.log(node);
            // console.log(resolve);
            console.log(node);
            let id = node.data.id;
            resSubNode(id).then((result) => {
                console.log(result);
                if(result.status == 200){
                    let resList = result.data.data;
                    let data = [];
                    for(let i = 0; i < resList.length; i++){
                        data.push({label:resList[i].resourceName,id:resList[i].resourceId,leaf: true});
                    }
                    resolve(data);
                    
                }  
            })
        },
        saveRes(){
            console.log( this.selectNode);
            this.res.resourceParent = this.selectNode;
            this.res.status = this.res.isUse == true? "1":"0";
            resAdd(this.res).then((result) => {
                console.log(result);
                if(result.status == 200){
                    //加载，还是清空数据
                    this.$message({
                        message: '添加成功',
                        type: 'success'
                    });
                }  
            })
        },
        updateRes(){
            this.res.status = this.res.isUse == true? "1":"0";
            resUpd(this.res).then((result) => {
                console.log(result);
                if(result.status == 200){
                    //加载，还是清空数据
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    });
                }  
            })
        }

    },
    mounted(){
        //加载根节点
        this.loadRoot();
    }
}
</script>

<style scoped>
    .operate-alter{
        width:80px;
    }
    .operate-alter span{
        
    }
</style>